<template>
    <div id="app">
        <el-container >
            <!--抬头开始-->
            <el-header style="margin: 0;padding: 0; position: relative;right: 0">
                <div class="center" style="position: relative;
                top: 0;
                left: 0;
                z-index: 99;
                background-color: white;
                height: 63px">
                    <el-row gutter="20">
                        <el-col span="4">
                            <img src="http://rww08uahf.hn-bkt.clouddn.com/964a0f20e41b4303959890fe8c2231be.png" width="196" height="65">
                        </el-col>
                        <el-col span="18">
                            <el-menu default-active="0" mode="horizontal">
                                <el-menu-item index="0">
                                    <h1>欢迎登录后台管理系统</h1>
                                </el-menu-item>
                            </el-menu>
                        </el-col>
                        <el-col span="1">
                            <el-popover placement="top-start" title="欢迎来到 kun吧" width="100" trigger="hover"
                                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                                <div slot="reference">
                                    <i class="el-icon-user"
                                        style="font-size: 30px;position: relative;margin:15px 20px;"></i>
                                </div>
<!--                                <el-button type="info">注册</el-button>-->
                                <el-button style="background-color: #3c32fb;color: white">请先登录</el-button>
                            </el-popover>
                        </el-col>
                    </el-row>
                </div>
            </el-header>
            <!--抬头结束-->
            <!--内容开始-->
            <div class="background">
            <el-main >
                <el-row class="login-box" style=" display: flex;align-items: center;justify-content: center;">
                    <!-- 头像区域 -->
                    <el-col class="ava">
                        <img style="height: 100%;width: 100%;border-radius: 50%;background-color: #fff;"
                            src="http://rww08uahf.hn-bkt.clouddn.com/964a0f20e41b4303959890fe8c2231be.png" alt="头像">
                    </el-col>
                    <!-- 登录表单区域 -->
                    <el-form ref="formRef" label-width="10px" class="ff" >
                        <el-form-item>
                            <el-input type="text" v-model="user.username" placeholder="请输入用户名" prop="username" class="ipt1"
                                prefix-icon="el-icon-user-solid">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input type="password" v-model="user.password" placeholder="请输如密码" class="ipt2"
                                prefix-icon="el-icon-lock">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
<!--                            <span style="top: -80px">-->
                                <el-input placeholder="输入验证码" v-model="user.code"
                                    style="width: 110px;position: relative;bottom: 14px;left:-40px;top: -90px"></el-input>
                                <img :src="url" style=" top: -75px;cursor: pointer;position: relative;" alt="" @click="getUrl()">
<!--                            </span>-->
                        </el-form-item>
                        <el-form-item >
                            <el-button style="position: relative;top: -80px;left: -50px" type="primary" @click="login()">登录</el-button>
                            <el-button style="position: relative;top: -80px;left: 10px" type="info" @click="resetForm()">重置</el-button>
                        </el-form-item>

                    </el-form>
                </el-row>
            </el-main>
            </div>
        </el-container>
    </div>
</template>
<script>
import axios from "axios";

export default {
    data: function () {
        return {
            user: {
                username: "",
                password: "",
                code: ""
            },
            url: ""
        }
    },

    methods: {
        getUrl() {
            // {
            //     // responseType: 'blob'
            // }
            axios.get('http://localhost:8088/kaptcha', { responseType: 'blob' }).then((response) =>{
                console.log(response.data)
                this.url = window.URL.createObjectURL(response.data);
                console.log(this.url)
            })

        },

        login() {
            axios.post('http://localhost:8088/manager/loginByUsername', this.user).then((response)=>{

                if (response.data.code === 1) {
                    localStorage.Manager=JSON.stringify(response.data.data);
                    window.location.replace('blogAndUserManager.html');

                }
                else {
                    this.$message.error(response.data.msg);
                }

            })

        },
        resetForm() {
            this.user.username = ''
            this.user.password = ''
            this.user.code = ''
        }
    },
    created: function () {
        this.getUrl();
    }
}
</script>

<style>
.background {
    background-image: url("../../assets/13.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 62px;
}

.center {
    width: 100%;
    margin: 0 auto;
    //min-width: 1200px;
}
.login-box {
    width: 380px;
    height: 470px;
    background-color: rgb(211, 229, 238,0.8);
    border-radius: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 10%);
    border-color: black;
}

.ava {
    height: 140px;
    width: 140px !important;
    //border: 1px solid #cb6bd5;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 0 5px #409EFF;
    transform: translate(-10%, -110%);
    background-color: #accbea;
}

.ff {
    position: absolute;
    bottom: 0;
    width: 60%;
    height: 45%;
    text-align: center;
    border-color: black;
}

.ipt1,
.ipt2 {
    width: 280px !important;
    height: 26px;
    padding: 0;
    left: -40px;
    top: -80px;
}
</style>
